<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>体现Vue数据双向绑定模板</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<h2>{{msg}}</h2>
		<div id="app">
			<h2>{{msg}}</h2>
			<h3>{{msg}}</h3>
			<h4>{{msg}}</h4>
			<h5>{{msg}}</h5>
			
			<!--要操作vue的数据，必须设置一个指令 v-model
			1.操纵页面元素view，数据Model发生变化
			2.操纵数据Model，页面元素内容view随之改变
			Vue和js，jquery有本质区别：
			1.js它专门有一套api需要学习，需要额外记忆
			2.jquery本质封装js，简化js写法，又独创了一套api
			3.Vue完全不同思路，只需操作数据，不同的组件操作方式完全相同，
			只需要操作数据，无需额外记忆
			vue替代js和jquery
			-->
			<input type="text" id="msg" v-model="msg" />
		   
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"北京天安门"
			}
		});
	</script>
</html>
